<template>
  <div class="list-count-wrap">
    <div style="padding: 0 0 0 0;">
      <div v-if="showTitle" style="flex: 1;margin-bottom:10px;">
        <Title :font-size="fontSize" title="数据统计" />
      </div>
      <dataDisplay v-if="list" :data-list="list" :type="modeType" :span-num="spanNum" class="mobile-data"/>
      <div v-if="list" :style="btnStyle" class="center">
        <span style="flex:1;"/>
        <slot name="btn-group">
          <div class="btn-group">
            <span :class="active === 0 ? 'now active' : 'now'" @click="handleMonthClick(0)">本月</span>
            <span :class="active === 1 ? 'pre active' : 'pre'" @click="handleMonthClick(1)">上月</span>
          </div>
          <el-date-picker
            v-model="monthTime"
            :clearable="false"
            value-format="timestamp"
            size="small"
            type="month"
            style="width:120px"
            placeholder="指定月份"
            @change="handleChange"/>
        </slot>
      </div>
    </div>
  </div>
</template>
<script>
import Title from '@/components/Title';
import dataDisplay from '@/components/Common/baseComponent/dataDisplay';

export default {
  name: 'ListCount',
  components: {
    Title, dataDisplay
  },
  props: {
    btnStyle: {
      type: Object,
      default: () => ({})
    },
    list: {
      type: Array,
      default: () => []
    },
    fontSize: {
      type: String,
      default: '20px'
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    modeType: {
      type: String,
      default: ''
    },
    spanNum: {
      type: Number,
      default: 3
    }
  },
  data() {
    return {
      monthTime: this.getCurrentMonth().getTime(),
      active: 0
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    getCurrentMonth() {
      const now = new Date();
      now.setDate(1);
      now.setHours(0);
      now.setSeconds(0);
      now.setMinutes(0);
      return now;
    },
    handleMonthClick(val) {
      const now = this.getCurrentMonth();
      this.active = val;
      this.monthTime = new Date(now.setMonth(now.getMonth() - val)).getTime();
      this.fetchData();
    },
    handleChange() {
      this.active = 2;
      this.fetchData();
    },
    fetchData() {
      this.$emit('fetchData', this.monthTime);
    }
  }
};
</script>
<style lang="scss" scoped>
.list-count-wrap {
  font-size: 14px;
  position: relative;
  .center {
    align-items: center;display: flex;margin-top:-10px;
  }
}
.list-count-content {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 14px 10px;
  background: #FAFAFC;
  border-radius: 4px;
}
.list-count-item {
  flex-basis: 230px;
  line-height: 22px;
  color: #666;
  display: flex;
  align-items: center;
  margin-right: 20px;
  margin-bottom: 10px;
  img {
    display: inline-block;
    width: 12px;
    height: 16px;
    margin-right: 4px;
  }
  .list-count-name {
    white-space: nowrap;
  }
  .list-count-value {
    color: #406EFF;
    margin-left: 8px;
    font-size: 16px;
  }
}
.btn-group {
  width: 96px;
  height: 32px;
  padding: 5px 0 7px;
  border: 1px solid #DDD;
  opacity: 1;
  border-radius: 4px;
  margin-right: 10px;
  font-size: 0;
  background: #fff;
  span {
    font-size: 14px;
    display: inline-block;
    width: 46px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #666;
    cursor: pointer;
    &.active {
      color: #406EFF;
    }
  }
  .now {
    border-right: 1px solid  #DDD;
  }
}
</style>
